<template>
<div>
  <div class="goBack" @click="goBack()">
    <van-icon name="arrow-left" />
    <div>再逛逛</div>
  </div>
  <div class="one">
    <router-link to="/register">
     <span class="one1">
      注册
    </span>  </router-link>
    <div class="one2">
      <van-cell-group>
        <van-field
          v-model="username"
          clearable
          placeholder="邮箱/手机/用户名"
        />

        <van-field

          v-model="password"
          :type="password2"
          button
          :right-icon="eye"
          @click-right-icon='clickEye'
          placeholder="请输入您的登陆密码"
        />
      </van-cell-group>
    </div>
    <div class="one3">
      <van-checkbox v-model="checked">
        记住密码
        <img class="jzmm"
          slot="icon"
          slot-scope="props"
          :src="props.checked ? icon.normal : icon.active"
        >
      </van-checkbox>
    </div>
    <div class="one4">
      <button @click="logins()">登陆</button>
    </div>
    <div class="one5">
      <hr/>
      <span class="oesp1">
        其他登陆方式
      </span>
    </div>
    <div class="one6">
      <img src="../assets/shou-01.png" alt="" @click="usePhone">
      <img @click="changePasswordShow=true" src="../assets/wei-01.png" alt="">
    </div>
    <span @click="goaot" class="wang" >忘记密码?</span>
  </div>
  <div class="phone-login" v-if="showUsePhone">
    <div class="top">
      <div @click="closeUsePhone"><van-icon name="cross" /></div>
      <div>注册</div>
    </div>
    <div>
      <div class="phone-h">手机快捷登录</div>
      <div class="phone-ex">(境外手机请加区号)</div>
      <div class="phone-input-box">
        <div class="phone-input">
          <van-cell-group>
            <van-field
              v-model="sms"
              center
              clearable
              placeholder="请输入手机号"
            >
            </van-field>
          </van-cell-group>
        </div>
      </div>
      <div class="phone-input-box bottom1">
        <div class="phone-input">
           <div class="phone-password">
            <input v-model="sms1" type="text" button="" placeholder="请输入验证码" class="van-field__control">
          </div>
          <div class="btn2">
           <van-button @click="huoQ" :disabled="!this.canClick" slot="button" size="small" type="primary">{{content}}</van-button>
          </div>
        </div>
      </div>
      <!-- <div class="phone-input-box bottom1">
        <div class="phone-input">
           <div class="phone-password">
            <input v-model="sms2" type="password" button="" placeholder="请输入手机验证码" class="van-field__control">
            <div class="van-field__right-icon">

            </div>
            <van-button @click="huoQ" slot="button" size="small" type="primary">验证码</van-button>
          </div>
        </div>
      </div> -->
      <div class="phone-error" v-if="showPhoneError">*您输入的手机号有误,请核对后重新输入</div>
      <div class="fast-login">
        <div class="one4">
          <button @click="dDen">登陆</button>
        </div>
      </div>
      <div class="use-name-password">账号密码登录</div>
      <div class="phone-bottom">
        <!-- <div class="wx-line"></div> -->
        <!-- <div class="else-login">其他登录方式</div> -->
        <!-- <div class="wx-line"></div> -->
      </div>
      <!-- <div class="wx-icon"><img src="../assets/wei-01.png" alt=""></div> -->
    </div>
  </div>
</div>
</template>

<script>
import request from '../../static/request.js'
import { Notify } from 'vant'

export default {
  name: 'login',
  // 注册组件
  components: {

  },
  data () {
    return {
      username:'',
      password:'',
      checked: false,
      icon: {
        normal:require('../assets/not.png'),
        active:require('../assets/yes.png'),
      },
      sms: '',
      sms1:'',
      sms2:'',
      showUsePhone: false,
      showPhoneError: false,
      password2: 'password',
      eye: 'closed-eye',
      imgs:'',       // 图像验证码
      totalTime: 60,    // 短信验证按钮60秒
      canClick: true, //添加canClick
      content: '发送验证码',  // 按钮里显示的内容
      changePasswordShow:false, // 忘记密码弹窗
      passname:'',  // 找回密码用 账号
      passyan:'',   // 找回密码用 验证码
      password0:'', // 找回密码用 密码
      password1:'',  // 找回密码用 确认密码
    }
  },
  created(){

  },
  methods:{
    // 找回密码
    goaot(){
      this.$router.push('/Retrieve')
    },
    // 60秒倒计时
    countDown () {
     if (!this.canClick) return  //改动的是这两行代码
     this.canClick = false
     this.content = this.totalTime + 's'
     let clock = window.setInterval(() => {
      this.totalTime--
      this.content = this.totalTime + 's'
      if (this.totalTime < 0) {
       window.clearInterval(clock)
       this.content = '重新发送验证码'
       this.totalTime = 60
       this.canClick = true  //这里重新开启
      }
     },1000)
    },
    dDen(){
      request({
        url: '?controller=theapi&action=mobile_login',
        method: 'get',
        params: {
          mobile: this.sms,
          mobile_code: this.sms1,
        }
      }).then(res=>{
        console.log(res);
        if(res.data.return_code == 'error'){
          Notify({
            message: '登录名或密码错误',
            duration: 1000,
            background: '#F52E67'
          })
          return
        }else if(res.data.return_code == 'success'){
          Notify({
            message: '登陆成功',
            duration: 1000,
            background: '#F52E67'
          })
          this.$router.push('Mall')
        }
        if(res.data.data !== ''){
          // _this.$router.push('/')
        }
      })
    },
    huoQ(){
      console.log(this.sms)
      // if(this.sms == ''){
      //   Notify({
      //     message: '请输入手机号',
      //     duration: 1000,
      //     background: '#F52E67'
      //   })
      // }
      request({
        url: '?controller=simple&action=_sendMobileCode',
        method: 'get',
        params: {
          mobile: this.sms,
        }
      }).then(res=>{
        console.log(res)
        if(res.data == '请填写正确的手机号码'){
          Notify({
            message: '请填写正确的手机号码',
            duration: 1000,
            background: '#F52E67'
          })
        }else if(res.data == 'error'){
          Notify({
            message: '一小时之内只能获取5次验证码',
            duration: 1000,
            background: '#F52E67'
          })
        }else if(res.data == 'success'){
          this.countDown();
        }
      })
    },
    logins(){
      let _this = this
      request({
        url: '?controller=theapi&action=login_act',
        method: 'get',
        params: {
          login_info: this.username,
          password: this.password
        }
      }).then(res=>{
        console.log(res);
        if(res.data.return_code == 'error'){
          Notify({
            message: '登录名或密码错误',
            duration: 1000,
            background: '#F52E67'
          })
          return
        }
        if(res.data.data !== ''){
          _this.$router.push('/')
        }
      })
    },
    usePhone(){
      this.showUsePhone = true;
    },
    closeUsePhone(){
      this.showUsePhone = false
    },
    goBack(){
      this.$router.push({name:"home"})
    },
    clickEye(){
      if(this.password2 == 'password'){
        this.password2 = 'text'
        this.eye  = 'eye'
      }else{
        this.password2 = 'password'
        this.eye  = 'closed-eye'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
>>> .van-field__body{
  border-bottom: 1px solid #e6e6ee;
}
>>> .van-field__body input{
  height: 1rem;
}
/*手机号登录开始*/
.phone-login{
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 99;
}
.tus img{
  width: 1.5rem;
  height: 0.8rem;
}
.phone-login .top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.3rem;
  font-size: 0.35rem;
}
.phone-h{
  margin: 0.66rem 0 0 11.2%;
  font-size: 0.34rem;
  font-weight: 600;
}
.phone-ex{
  margin: 2.47% 0 0 11.2%;
  font-size: 0.26rem;
}
.phone-login .top div:first-of-type{
  font-weight: 800;
}
.phone-input-box{
  display: flex;
  padding-top: 0.5rem;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.phone-input{
  position: relative;
  width: 77.33%;
  height: 100%;
  /* padding: 0 0 0.1rem 0; */

}
.van-field__control{
  width: 100%;
  height: 0.6rem;
  margin-left: -0.6rem;
}
.bottom1{
  width: 77.33%;
  margin: 0 auto;
  border-bottom: 1px solid #C7CACD;
}
.van-cell{
  padding: 0;
}
.van-hairline--top-bottom::after{
  border: none;
}
.van-button--default{
  border: none;
  color: #f52e67;
}
.phone-password{
  /* margin: 0.2rem 0 0 0; */
  /* padding: 0 0 0.12rem 0; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  text-align: left;
}
/* .fast-login input{
  width: 100%;
  height: 0.3rem;
} */

.fast-login{
  margin: 1.62rem 0 0 0;
}
.use-name-password{
  text-align: center;
  font-size: 0.3rem;
}
.phone-error{
  margin: 0.52rem 0 0 11.2%;
  color: #f52e67;
}
.phone-bottom{
  margin: 1.24rem 0 0 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wx-line{
  width: 14.67%;
  border: 0.01rem solid #C7CACD;
}
.else-login{
  padding: 0 0.22rem;
}
.wx-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0 0 0;
}
.wx-icon img{
  width: 0.68rem;
  height: 0.68rem;
}
/*手机号登录结束*/


.one{
  width: 7.5rem;
  height: 13.22rem;
  background-size: 100% 100%;
  background-image: url(../assets/logobg-1.png);
  overflow: hidden;
}
.one1{
  position: absolute;
  right: 0.75rem;
  top: 2.35rem;
  color: #f52e67;
  font-size: 0.25rem;
}
.one2{
  width: 5.8rem;
  margin: 0 auto;
  margin-top: 4.3rem;
}
.one2 input{
  background: #fff !important;
}
.one3{
  width: 5.8rem;
  margin: 0.6rem auto;
  margin-bottom: 0.15rem;
}
.one4{
  width: 6.95rem;
  height: 1.8rem;
  margin: 0 auto;
  background-image: url(../assets/btn-01.png);
  background-size:100% 100%;
  text-align: center;
}
.one4 button{
  width: 5.9rem;
  height: 0.8rem;
  margin-top: 0.37rem;
  border: 0rem;
  background: rgba(0, 0, 0, 0);
  text-align: center;
  color: #fff;
  font-size: 0.28rem;
}
.one5{
  width: 4.25rem;
  height: 0.25rem;
  margin: 0 auto;
  color: #c7cacd;
  position: relative;
  overflow: hidden;
}
.one5 hr{
  color: #c7cacd;
  margin-top: 0.125rem;
}
.oesp1{
  position: absolute;
  display: inline-block;
  width: 2.05rem;
  height: 0.25rem;
  background: #fff;
  top: 0;
  text-align: center;
  line-height: 0.25rem;
  left: 50%;
  margin-left: -1.025rem;
}
.one6{
  width: 2.8rem;
  height: 0.7rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
}
.one6 img{
  width: 0.7rem;
  height: 0.7rem;
}
.wang{
  position: relative;
  bottom: 0.7rem;
  font-size: 0.25rem;
  color: #bfbfbf;
  left: 50%;
  margin-left: -0.6rem;
  bottom: -1rem;
}
.jzmm{
  height: 12px;
  width: 12px;
}
.goBack{
  position: fixed;
  top: 0.2rem;
  left: 0.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.3rem;
  color: #fff;
  z-index: 999;
}
.goBack>div{
  margin: 0 0 0 0.1rem;
}
.btn2{
  position: absolute;
  right: -0.6rem;
  top: -0.2rem;
}
</style>
